<template>

	<view class="item">
		<view class="top">
			<view class="avatar">
				<u-avatar size="70" mode="square"
					:src="item.head_100 | formatImage" @click="userinfo"></u-avatar>
			</view>
			<view class="info">
				<view style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
					<view>
						<view class="nickname">
							<text>{{item.name}}</text>
							<view v-if="true" class="biaoji1" :style="false?'background: linear-gradient(to right, #d9a14e, #b57e2c);':'background: #313131;'">
								<image v-if="false" src="../static/index/nvshen.png" style="width: 18rpx;height: 18rpx;"></image>
								<image v-if="true" src="../static/index/zhenren.png" style="width: 19rpx;height: 19rpx;"></image>
								<view style="margin-left: 5rpx;" :style="false?'color: #0F0D0F;':'color: #C99F51;'">{{true?'女神':'真人'}}</view>
							</view>
							<!-- <image mode="widthFix" v-if="item.is_identity_authentication==2 && item.sex=='女'"
								src="/static/real.png" class="ptag"></image>
							<image mode="widthFix" v-if="item.is_identity_authentication!=2 && item.sex=='女'"
								src="/static/norz.png" class="ptag"></image> -->
						</view>
						<view style="width: 70rpx;height: 31rpx;border-radius: 40rpx;display: flex;justify-content: center;align-items: center;background-color: #FDADB7;color: #fff;font-size: 20rpx;">
							<image v-if="false" src="../static/logins/nan2.png" style="width: 15rpx;height: 15rpx;"></image>
							<image v-if="true" src="../static/logins/nv2.png" style="width: 15rpx;height: 15rpx;"></image>
							<view style="margin-left: 10rpx;">24</view>
						</view>
						<!-- <view class="pubtime">{{item.addtime}}</view> -->
					</view>
					<u-icon color="#C5C3C3" style="-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);" size="40" 
						name="more-dot-fill" @click.native.stop="dyopsshow"></u-icon>
				</view>
				<view class="middle">
					<view class="tag" v-if="item.content">
						<text>{{item.content}}</text>
					</view>
					<view class="images" v-if="item.sumbImage[0]"
						:class="{'single':item.sumbImage.length == 1, 'two':item.sumbImage.length == 2, 'overthr':item.sumbImage.length >= 3}">
						<!-- <video v-if="true" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
							poster="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" play-btn-position="center" object-fit="fill" 
							controls="false" show-center-play-btn="false"></video>
						<view style="width: 40vw;height: 40vw;top: 14rpx;position: absolute;left: 10rpx;
							display: flex;justify-content: center;align-items: center;">
							<image v-if="true" src="../static/touxiang.png" style="width: 100%;height: 100%;z-index: 50%;position: absolute;top: 0;"></image>
							<view style="width: 40rpx;height: 40rpx;background-color: rgba(0, 0, 0, 0.3);z-index: 100;
								display: flex;justify-content: center;align-items: center;border-radius: 50%;">
								<u-icon name="play-right-fill" color="#fff" size="28"></u-icon>
							</view>
						</view> -->
						<image v-if="true" lazy-load v-for="(pic,pidx) in imglist" :key="pidx" @click="preimage(item.sumbImage,pidx)"
							:src="pic | formatImage" @error="errorimg(pidx)" mode="aspectFill"></image>
					</view>
				</view>
				<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;font-size: 20rpx;">
					<view class="pubtime">{{item.fbtime}}·{{item.citys}}</view>
					<view class="bottom">
						<view class="leftop">
							<view class="itemop" @click.stop="zan">
								<image :src="item.isthumbsup == 1 ? '/static/d4.png' : '/static/d0.png'" mode=""></image>{{item.isthumbsup == 1?'取消点赞':'点赞'}}</view>
							<view class="itemop" style="margin-left: 40rpx;" @click.stop="sayhi">
								<image src="/static/hi.png" mode=""></image>发消息</view>
						</view>
					</view>
				</view>
				<!-- <view class="addressinfo">
					<image src="/static/location2.png" mode="heightFix"></image>
					<text>{{item.citys}}</text>
					<text>·</text>
					<text>{{item.distance}}</text>
				</view>
				<view class="huati" v-if="themeObj[item.category_id]">#{{themeObj[item.category_id]}}</view>
				<view class="bottom">
					<view class="leftop">
						<view class="itemop" @click.stop="zan">
							<image :src="item.isthumbsup == 1 ? '/static/d4.png' : '/static/d0.png'" mode=""></image>
							点赞
						</view>
						<view class="itemop" @click.stop="sayhi">
							<image src="/static/hi.png" mode=""></image>
							打招呼
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dy-item",
		props: {
			item: {}
		},
		data() {
			return {
				themeObj: this.$store.state.themeObj,
				imglist: []
			};
		},
		mounted() {
			this.imglist = this.item.sumbImage
		},
		methods:{
			sayhi(){
				this.$judgeQx(this.item.id, ()=>{
					uni.navigateTo({
						url:'/pages/message/index?toid='+this.item.id+'&name='+this.item.name
					})
				}, 1)
			},
			preimage(list,pidx){
				var lists = JSON.parse(JSON.stringify(list))
				for(var i=lists.length-1; i >=0; i--){
					lists[i] = this.$HOSTURL + lists[i]
				}
				uni.previewImage({
					current: pidx,
					urls: lists
				});
			},
			dyopsshow(){
				this.$emit('dyopsshow')
			},
			zan(){
				this.$emit('zan')
			},
			errorimg(pidx){
				this.$set(this.imglist,pidx,'/static/error-img.png')
			},
			userinfo(){
				uni.navigateTo({
					url:'/pages/userinfo/index?id=' + this.item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		margin-bottom: 20rpx;
		padding: 30rpx;

		.top {
			display: flex;

			.avatar {
				margin-right: 20rpx;
			}

			.info {
				width: calc(100% - 90rpx);

				.nickname {
					color: #fff;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;

					text {
						margin-right: 14rpx;
					}

					image {
						width: 72rpx;
						height: 42rpx;
					}

				}

				.pubtime {
					color: #999;
					font-size: 24rpx;
				}

				.middle {
					color: #fff;
					padding: 10rpx 0;
					position: relative;
					border-radius: 20rpx;
					margin-top: 20rpx;

					.images {
						padding-top: 14rpx;
						display: flex;
						position: relative;
						video{
							width: 40vw;
							height: 40vw;
							border-radius: 15rpx;
						}
						&.single {
							image {
								width: 40vw;
								height: 40vw;
								border-radius: 15rpx;
							}
						}
						&.overthr{
							flex-wrap: wrap;
							image {
								margin-bottom: 20rpx;
								min-width: 24vw;
								width: 24vw;
								height: 24vw;
								border-radius: 15rpx;
								margin-right: 20rpx;
							}
						}
						&.two{
							image {
								min-width: 30vw;
								width: 30vw;
								height: 30vw;
								border-radius: 15rpx;
								margin-right: 20rpx;
							}
						}
					}
				}

				.addressinfo {
					color: #ccc;
					display: flex;
					align-items: center;
					padding: 20rpx 0;

					image {
						height: 30rpx;
					}

					text {
						margin: 0 10rpx;
						font-size: 24rpx;
					}
				}

				.huati {
					background: rgba(255, 255, 255, 0.5);
					color: #fff;
					font-size: 24rpx;
					font-weight: bold;
					padding: 0 20rpx;
					border-radius: 30rpx;
					line-height: 2;
					margin: 12rpx 0 24rpx;
					display: inline-block;
				}
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #C5C3C3;

			.leftop {
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.itemop {
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

	}
	.biaoji1{
		font-size: 16rpx;
		width: 85rpx;
		height: 35rpx;
		border-radius: 5rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
D